<script setup lang="ts">
import UserCard from './view/UserCard.vue'
import UserMenu from './view/UserMenu.vue'
import { DiyRouter } from '@yang/layouts/components'
const AddList = defineAsyncComponent(
  () => import('@/components/release/AddList.vue')
)
defineOptions({
  name: 'My'
})

const addRef = ref()
const handAdd = () => {
  addRef.value.open()
}
</script>

<template>
  <div class="my-page">
    <div class="my-page-main">
      <div class="nav">
        <div class="title">个人中心</div>
        <n-button class="btn" type="error" round @click="handAdd">
          发布投稿
        </n-button>
      </div>
      <div class="user-main">
        <div class="user-main-left">
          <user-card />
          <user-menu />
        </div>
        <div class="user-main-right">
          <div class="right-main">
            <div class="right-main-content">
              <DiyRouter superiorName="My" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <add-list ref="addRef" />
  </div>
</template>

<style scoped lang="scss">
.my-page {
  padding: 20px 0;
  height: 100%;

  &-main {
    width: 1200px;
    margin: 0 auto;
    height: 100%;

    .nav {
      display: flex;
      align-content: center;
      justify-content: space-between;
      padding-bottom: 10px;

      .title {
        font-size: 15px;
      }

      .btn {
        width: 100px;
      }
    }

    .user-main {
      display: flex;
      height: 100%;

      &-left {
        min-width: 231px;
        display: flex;
        flex-direction: column;
      }

      &-right {
        margin-left: 16px;
        flex: 1;
        position: relative;

        .right-main {
          &-content {
            position: relative;
          }
        }
      }
    }
  }
}
</style>
